<template>
  <div class="box">
    <div class="box1">
      <div class="echart">
        <Echarts1 />
      </div>
      <div class="echart">
        <Echarts2 />
      </div>
      <div class="echart">
        <Echarts3 />
      </div>
      <div class="echart">
        <Echarts4 />
      </div>
    </div>
    <div class="box1">
      <div class="echart">
        <Echarts5 />
      </div>
      <div class="echart">
        <Echarts6 />
      </div>
      <div class="echart">
        <Echarts7 />
      </div>
      <div class="echart">
        <Echarts8 />
      </div>
    </div>
    <div class="box1">
      <div class="echart">
        <Echarts9 />
      </div>
      <div class="echart">
        <Echarts10 />
      </div>
      <div class="echart">
        <Echarts11 />
      </div>
      <div class="echart">
        <Echarts12 />
      </div>
    </div>
    <div class="box1">
      <div class="echart">
        <Echarts13 />
      </div>
      <div class="echart">
        <Echarts14 />
      </div>
      <div class="echart">
        <Echarts15 />
      </div>
      <div class="echart">
        <Echarts16 />
      </div>
    </div>
    <div class="box1">
      <div class="echart">
        <Echarts17 />
      </div>
      <div class="echart">
        <Echarts18 />
      </div>
      <div class="echart">
        <Echarts19 />
      </div>
      <div class="echart">
        <Echarts20 />
      </div>
    </div>
    <div class="box1">
      <div class="echart">
        <Echarts21 />
      </div>
      <div class="echart">
        <Echarts22 />
      </div>
      <div class="echart">
        <Echarts23 />
      </div>
      <div class="echart">
        <Echarts24 />
      </div>
    </div>
    <div class="box1">
      <div class="echart">
        <Echarts25 />
      </div>
      <div class="echart">
        <Echarts26 />
      </div>
      <div class="echart">
        <Echarts27 />
      </div>
      <div class="echart">
        <Echarts28 />
      </div>
    </div>
    <div class="box1">
      <div class="echart">
        <Echarts29 />
      </div>
      <div class="echart">
        <Echarts30 />
      </div>
      <div class="echart">
        <Echarts31 />
      </div>
      <div class="echart">
        <Echarts32 />
      </div>
    </div>
    <div class="box1">
      <div class="echart">
        <Echarts33 />
      </div>
      <div class="echart">
        <Echarts34 />
      </div>
      <div class="echart">
        <Echarts35 />
      </div>
      <div class="echart">
        <Echarts36 />
      </div>
    </div>
    <div class="box1">
      <div class="echart">
        <Echarts37 />
      </div>
      <div class="echart">
        <Echarts38 />
      </div>
      <div class="echart">
        <Echarts39 />
      </div>
      <div class="echart">
        4
      </div>
    </div>
    <div class="box1">
      <div class="echart">
        1
      </div>
      <div class="echart">
        2
      </div>
      <div class="echart">
        3
      </div>
      <div class="echart">
        4
      </div>
    </div>
  </div>
</template>

<script>
import Echarts1 from '@/views/components/Echarts_1.vue'
import Echarts2 from './components/Echarts_2.vue'
import Echarts3 from './components/Echarts_3.vue'
import Echarts4 from './components/Echarts_4.vue'
import Echarts5 from './components/Echarts_5.vue'
import Echarts6 from './components/Echarts_6.vue'
import Echarts7 from './components/Echarts_7.vue'
import Echarts8 from './components/Echarts_8.vue'
import Echarts9 from './components/Echarts_9.vue'
import Echarts10 from './components/Echarts_10.vue'
import Echarts11 from './components/Echarts_11.vue'
import Echarts12 from './components/Echarts_12.vue'
import Echarts13 from './components/Echarts_13.vue'
import Echarts14 from './components/Echarts_14.vue'
import Echarts15 from './components/Echarts_15.vue'
import Echarts16 from './components/Echarts_16.vue'
import Echarts17 from './components/Echarts_17.vue'
import Echarts18 from './components/Echarts_18.vue'
import Echarts19 from './components/Echarts_19.vue'
import Echarts20 from './components/Echarts_20.vue'
import Echarts21 from './components/Echarts_21.vue'
import Echarts22 from './components/Echarts_22.vue'
import Echarts23 from './components/Echarts_23.vue'
import Echarts24 from './components/Echarts_24.vue'
import Echarts25 from './components/Echarts_25.vue'
import Echarts26 from './components/Echarts_26.vue'
import Echarts27 from './components/Echarts_27.vue'
import Echarts28 from './components/Echarts_28.vue'
import Echarts29 from './components/Echarts_29.vue'
import Echarts30 from './components/Echarts_30.vue'
import Echarts31 from './components/Echarts_31.vue'
import Echarts32 from './components/Echarts_32.vue'
import Echarts33 from './components/Echarts_33.vue'
import Echarts34 from './components/Echarts_34.vue'
import Echarts35 from './components/Echarts_35.vue'
import Echarts36 from './components/Echarts_36.vue'
import Echarts37 from './components/Echarts_37.vue'
import Echarts38 from './components/Echarts_38.vue'
import Echarts39 from './components/Echarts_39'
export default {
  components: {
    Echarts1,
    Echarts3,
    Echarts4,
    Echarts5,
    Echarts6,
    Echarts7,
    Echarts8,
    Echarts9,
    Echarts10,
    Echarts11,
    Echarts12,
    Echarts13,
    Echarts14,
    Echarts15,
    Echarts16,
    Echarts17,
    Echarts18,
    Echarts19,
    Echarts20,
    Echarts21,
    Echarts22,
    Echarts23,
    Echarts24,
    Echarts25,
    Echarts26,
    Echarts27,
    Echarts28,
    Echarts29,
    Echarts30,
    Echarts31,
    Echarts32,
    Echarts33,
    Echarts34,
    Echarts35,
    Echarts36,
    Echarts37,
    Echarts38,
    Echarts39,
    Echarts2
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  .box1 {
      margin-top: 10px;
    width: 100%;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .echart {
      width: 24.5%;
      height: 100%;
      background: pink;
    }
  }
}
</style>
